light mode
night mode
অ্যাজাক্স (Ajax)

প্রথম Ajax প্রোগ্রাম তৈরি করা

Web Development - অ্যাজাক্স (Ajax) - Ajax ইন্সটলেশন এবং সেটআপ (Setting Up Ajax) | NCTB BOOK
OPTIONS
Test Yorself
All Question
Edit Content
Add Video
Add MCQ
Add Written
Error Report

Ajax প্রোগ্রাম তৈরি করার জন্য আপনাকে HTML, JavaScript এবং একটি সার্ভার রিসোর্স (যেমন একটি API বা একটি JSON ফাইল) প্রয়োজন হবে, যেখান থেকে আপনি ডেটা আনবেন। এখানে একটি সহজ Ajax প্রোগ্রামের উদাহরণ দেওয়া হলো, যা সার্ভার থেকে JSON ডেটা নিয়ে তা HTML এ দেখাবে।

প্রথম Ajax প্রোগ্রাম উদাহরণ:

HTML (index.html):

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ajax Example</title>
</head>
<body>
    <h1>Ajax Data Load Example</h1>
    <button onclick="loadData()">Load Data</button>
    <div id="data-container"></div>

    <script src="app.js"></script>
</body>
</html>

ব্যাখ্যা:

  • এখানে একটি বেসিক HTML ফাইল তৈরি করা হয়েছে।
  • একটি button রয়েছে যা ক্লিক করার সময় loadData() ফাংশন কল করবে।
  • ডেটা প্রদর্শনের জন্য একটি <div> এলিমেন্ট রয়েছে যার আইডি data-container।
  • JavaScript কোডটি app.js ফাইলের মাধ্যমে যুক্ত করা হয়েছে।

JavaScript (app.js):

function loadData() {
    // XMLHttpRequest অবজেক্ট তৈরি করা
    var xhr = new XMLHttpRequest();
    
    // রিকোয়েস্ট ওপেন করা (GET মেথড, URL এবং অ্যাসিনক true)
    xhr.open("GET", "https://jsonplaceholder.typicode.com/posts/1", true);
    
    // রেসপন্স রেডি হলে কি করবে তা নির্ধারণ করা
    xhr.onreadystatechange = function() {
        if (xhr.readyState === 4 && xhr.status === 200) {
            // JSON ডেটা রিসিভ করা এবং প্রসেস করা
            var data = JSON.parse(xhr.responseText);
            
            // HTML এ ডেটা দেখানো
            document.getElementById("data-container").innerHTML = `
                <h2>${data.title}</h2>
                <p>${data.body}</p>
            `;
        }
    };
    
    // রিকোয়েস্ট পাঠানো
    xhr.send();
}

ব্যাখ্যা:

  • loadData() ফাংশন একটি Ajax রিকোয়েস্ট তৈরি করে এবং সার্ভারের URL https://jsonplaceholder.typicode.com/posts/1 থেকে JSON ডেটা রিসিভ করে।
  • xhr.open("GET", "URL", true); দিয়ে আমরা রিকোয়েস্ট ওপেন করেছি। "GET" মানে ডেটা আনতে চাই, "true" মানে এটি অ্যাসিনক্রোনাস হবে।
  • xhr.onreadystatechange ইভেন্ট হ্যান্ডলার ব্যবহার করে আমরা চেক করেছি যে রিকোয়েস্ট সম্পূর্ণ হয়েছে কিনা (readyState === 4) এবং সফল হয়েছে কিনা (status === 200)।
  • ডেটা রিসিভ হলে JSON ফরম্যাটে পার্স করে HTML ডকুমেন্টের data-container ডিভে সেই ডেটা দেখানো হয়েছে।

সার্ভার:

এখানে আমরা ডেমো API https://jsonplaceholder.typicode.com/posts/1 ব্যবহার করেছি, যা JSON ডেটা রিটার্ন করে। এই API ডেটা রিকোয়েস্ট করলে নিচের মতো ডেটা রিটার্ন করবে:

{
    "userId": 1,
    "id": 1,
    "title": "Sample Title",
    "body": "This is a sample body text."
}

প্রোগ্রামটি চালানোর ধাপ:

  1. HTML ফাইলটি (index.html) আপনার ব্রাউজারে খুলুন।
  2. "Load Data" বাটনে ক্লিক করুন।
  3. সার্ভার থেকে ডেটা লোড হয়ে HTML ডিভে প্রদর্শিত হবে।

সারসংক্ষেপ:

এই প্রোগ্রামে, আমরা একটি বেসিক Ajax রিকোয়েস্ট করেছি যা একটি API থেকে ডেটা এনে তা HTML পেজে দেখিয়েছি। এটি Ajax এর মাধ্যমে ডায়নামিক ডেটা লোড এবং UI আপডেট করার একটি সহজ উদাহরণ।

আরও দেখুন...

প্রথম Ajax প্রোগ্রাম তৈরি করা

or

Don't have an account? Register

Promotion